<template>
  <!-- 此处是首页内容 -->
  <div class="index" style="min-width:1200px;">
    <LoadingPage :showLoading="showLoading" />
    <MySwiper :swiperList="big_images" />
    <!-- 主体内容 -->
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="22">
        <!-- 轮播下面的导航 -->
        <TabMenu :links="links" />
        <!-- 主体内容的标题 -->
        <Title
          :titleText="'我们的业务'"
          :titleContent="'“以质量为生命，以科技为龙头，以顾客满意为宗旨”是联塑的经营方针，从售前的商务洽谈，售中的方案设计，到售后的安装指导及质量保修，服务贯穿全程。'"
          :link="'/Product'" />
        <!-- 工作卡片组 -->
        <WorkCard style="margin-bottom:50px;" />
        <!-- 服务网络组 -->
        <Card :lists="lists" />
        <!-- <NavigationLink :url="'http://www.baidu.com'" :class-name="'navLink'">跳转百度</NavigationLink> -->
        <!-- 假如 index  这块需要拓展其他页面，可以抽离这些页面-->
        <!-- 然后在这里打开下面这个标签 -->
        <!-- <router-view></router-view> -->
      </el-col>
    </el-row>
  </div>
</template>

<script>

import LoadingPage from '@/components/loading-page';
import TabMenu from '@/components/tab-menu.vue';
import MySwiper from '@/components/my-swiper.vue';
import Title from '@/components/title.vue';
import WorkCard from '@/components/work-card.vue';
import Card from '@/components/card.vue';
// import NavigationLink from '@/components/navigation-link.vue'

export default {
  name: 'GFIndex',
  components: {
    MySwiper,
    TabMenu,
    Title,
    WorkCard,
    Card,
    LoadingPage
    // NavigationLink
  },
  mounted () {
    this.getApi();
    const bgImg = new Image();
    bgImg.src = this.imgUrl; // 获取背景图片的url
    bgImg.onerror = () => { console.log('img onerror'); };
    bgImg.onload = () => { this.showLoading = false; };// 等背景图片加载成功后 去除loading
  },
  data () {
    return {
      imgUrl: 'http://dummyimage.com/1920x890',
      showLoading: true,
      lists: [
        { title: '服务网络', content: '查询离您最近销售服务网点', images: 'http://dummyimage.com/555x328' },
        { title: '服务网络', content: '查询离您最近销售服务网点', images: 'http://dummyimage.com/555x328' },
        { title: '服务网络', content: '查询离您最近销售服务网点', images: 'http://dummyimage.com/555x328' }
      ],
      links: [
        { link: '/Product', name: '产品中心', iconfont: 'icon-biaoqiankuozhan_chanpin-197', text: '抓机遇，南塑二期项目启动，加速铸造发展新引擎' },
        { link: '/Service', name: '配送服务', iconfont: 'icon--_peisongshang', text: '抓机遇，南塑二期项目启动，加速铸造发展新引擎' },
        { link: '/News', name: '价格动态', iconfont: 'icon-community', text: '抓机遇，南塑二期项目启动，加速铸造发展新引擎' }
      ],
      big_images: [/* 坑 */],
      small_images: []
    };
  },
  methods: {
    async getApi () {
      const { data: res } = await this.$http('/gftopen/index/lunbo');
      var { links, lists, lunbo } = res.message;

      this.big_images = lunbo.big;
      this.small_images = lunbo.small;
      this.lists = lists;
      this.links = links;
    }
  }
};
</script>

<style lang='scss' scoped>
.tab-menu {
  position: relative;
  transform: translateY(-50%);
  z-index: 1;
}
</style>
